<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="utf-8">
        <title>
            二当家的Lay1.0
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="../houtaistatic/css/x-admin.css" media="all">
    </head>
    
    <body>
        <div class="x-body">

            <form class="layui-form" enctype="multipart/form-data" method="post" action="/routeJb/updateJb">

                <input type="hidden" id="id" name="id" th:value="${routeJb.id}"/>
                <input type="hidden" id="status" name="status" value="1"/>
                <div class="layui-form-item">
                    <label for="title" class="layui-form-label">
                        <span class="x-red">*</span>行程标题
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="title" name="title" required="" lay-verify="required"
                        autocomplete="off" class="layui-input" th:value="${routeJb.title}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>一个好的标题会吸引更多的顾客哦。
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="origin" class="layui-form-label">
                        <span class="x-red">*</span>起点
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="origin" name="origin" required="" lay-verify="origin"
                        autocomplete="off" class="layui-input" th:value="${routeJb.origin}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="destination" class="layui-form-label">
                        <span class="x-red">*</span>目的地
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="destination" name="destination" required="" lay-verify="destination"
                        autocomplete="off" class="layui-input" th:value="${routeJb.destination}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="days" class="layui-form-label">
                        <span class="x-red">*</span>天数
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="days" name="days" required="" lay-verify="days"
                               autocomplete="off" class="layui-input" th:value="${routeJb.days}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="maxPerson" class="layui-form-label">
                        <span class="x-red">*</span>最大人数
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="maxPerson" name="maxPerson"  required="" lay-verify="maxPerson"
                               autocomplete="off" class="layui-input" th:value="${routeJb.maxPerson}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="price" class="layui-form-label">
                        <span class="x-red">*</span>单人价格
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="price" name="price"  required="" lay-verify="price"
                               autocomplete="off" class="layui-input" th:value="${routeJb.price}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red"></span>
                    </div>
                </div>


                <div class="layui-form-item" >
                    <label for="roles" class="layui-form-label">
                        <span class="x-red">*</span>一级分类
                    </label>
                    <div class="layui-input-inline">
                      <select id="travelType1" name="travelType1" style="display: inline-block; width: 190px;height: 38px" required="required" >

                      </select>
                    </div>
                </div>
                <div class="layui-form-item" >
                    <label for="roles" class="layui-form-label">
                        <span class="x-red">*</span>二级分类
                    </label>
                    <div class="layui-input-inline">
                        <select id="travelType2" name="travelType2" style="display: inline-block; width: 190px;height: 38px" required="required">

                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="price" class="layui-form-label">
                        <span class="x-red">*</span>详情图片1
                    </label>
                    <input type="file"  id="uploadFile1" accept="image/*" class="uploadFile" name="uploadFile" value="" style="display: none;">
                    <input type="button" id="imgBtn1" class="imgBtn" value="选择图片"  />
                    <div id="imgs1" class="imgsss"><img th:src="${routeJb.imgName1}" th:if="${routeJb.imgName1 ne null}" width='200px' height='100px' /></div>
                </div>

                <div class="layui-form-item">
                    <label for="price" class="layui-form-label">
                        <span class="x-red">*</span>详情图片2
                    </label>
                    <input type="file" id="uploadFile2" accept="image/*" class="uploadFile"  name="uploadFile" value="" style="display: none;">
                    <input type="button" id="imgBtn2" class="imgBtn" value="选择图片"  />
                    <div id="imgs2" class="imgsss"><img th:src="${routeJb.imgName2}" th:if="${routeJb.imgName2 ne null}" width='200px' height='100px' /></div>
                </div>

                <div class="layui-form-item">
                    <label for="price" class="layui-form-label">
                        <span class="x-red">*</span>详情图片3
                    </label>
                    <input type="file" id="uploadFile3" accept="image/*" class="uploadFile" name="uploadFile" value="" style="display: none;">
                    <input type="button" id="imgBtn3" class="imgBtn" value="选择图片"  />
                    <div id="imgs3" class="imgsss"><img th:src="${routeJb.imgName3}" th:if="${routeJb.imgName3 ne null}" width='200px' height='100px' /></div>
                </div>

                <div class="layui-form-item">
                    <label for="price" class="layui-form-label">
                        <span class="x-red">*</span>详情图片4
                    </label>
                    <input type="file" id="uploadFile4" accept="image/*" class="uploadFile" name="uploadFile" value="" style="display: none;">
                    <input type="button" id="imgBtn4" class="imgBtn" value="选择图片"  />
                    <div id="imgs4" class="imgsss"><img th:src="${routeJb.imgName4}" th:if="${routeJb.imgName4 ne null}" width='200px' height='100px' /></div>
                </div>

                <div style="" >
                    <div class="routeJb-js" style="font-size:20px;">行程介绍
                        <input id="recommendation" name="recommendation" class="route-hidden" type="hidden" th:value="${routeJb.recommendation}"/>
                    </div>
                    <div class="routeJb-js" style="display: none;font-size:20px;">行程亮点
                        <input id="lightspot" name="lightspot" class="route-hidden" type="hidden" th:value="${routeJb.lightspot}"/>
                    </div>
                    <div class="routeJb-js" style="display: none;font-size:20px;">费用说明
                        <input id="priceExplain" name="priceExplain" class="route-hidden" type="hidden" th:value="${routeJb.priceExplain}"/>
                    </div>
                    <div class="routeJb-js" style="display: none;font-size:20px;">服务标准
                        <input id="serviceExplain" name="serviceExplain" class="route-hidden" type="hidden" th:value="${routeJb.serviceExplain}"/>
                    </div>
                    <div class="routeJb-js" style="display: none;font-size:20px;">预定须知
                        <input id="reserveExplain" name="reserveExplain" class="route-hidden" type="hidden" th:value="${routeJb.reserveExplain}" />
                    </div>
                    <textarea id="route-text" name="res" rows="5" style="display: none;"></textarea>
                    <div class="layui-form-item">
                        <label  class="layui-form-label">
                        </label>
                        <input class="layui-btn" type="button" value="上一步" onclick="oclick()"/>
                        <input class="layui-btn" type="button" value="下一步" onclick="rclick()"/>
                        <input id="submit" class="layui-btn" type="submit" value="提交"  style="display: none;"/>
                    </div>
                </div>
            </form>

        </div>
        <script type="text/javascript" src="/houtaistatic/js/jquery.min.js"></script>
        <script th:inline="javascript">
            $(function () {
                var so=[[${so}]];
                var st=[[${st}]];
                //动态加载一级分类列表
                $.ajax({
                    type:"GET",//请求方式
                    url:"/traveltype/finAll",//请求路径
                    data:{parentId:null},//请求参数
                    dataType:"json",//返回数据类型
                    success:function (data) {
                        $("#travelType1").html("");
                        var options="<option value=\"\">--请选择--</option>";
                        for (var i = 0; i<data.length; i++){
                            options+="<option value=\""+data[i].id+"\">"+data[i].typeName+"</option>";
                        }
                        $("#travelType1").html(options);
                        $("#travelType1").val(so);
                        var categoryLevel11=$("#travelType1").val();
                        $.ajax({
                            type:"GET",
                            url: "/traveltype/finAll",
                            data: {parentId:categoryLevel11},
                            dataType: "json",
                            success:function(data){
                                $("#travelType2").html("");
                                var options="<option value=\"\">--请选择--</option>";
                                for (var i = 0; i<data.length; i++){
                                    if(data[i].id==st){
                                        options+="<option value=\""+data[i].id+"\" selected=\"true\">"+data[i].typeName+"</option>";
                                    }else{
                                         options+="<option value=\""+data[i].id+"\">"+data[i].typeName+"</option>";
                                        }
                                }
                                $("#travelType2").html(options);
                                $("#travelType2").val(st);
                            },error:function (data) {
                                alert("加载二级分类失败！")
                            }
                        });
                    },
                    error:function (data) {//当访问时候，404，500 等非200的错误状态码
                        alert("加载一级分类列表失败！");
                    }

                });
                //动态加载二级分类列表
                $("#travelType1").change(function () {
                    var categoryLevel1=$("#travelType1").val();
                    if(categoryLevel1 != '' && categoryLevel1 != null){
                        $.ajax({
                            type:"GET",
                            url: "/traveltype/finAll",
                            data: {parentId:categoryLevel1},
                            dataType: "json",
                            success:function(data){
                                $("#travelType2").html("");
                                var options="<option value=\"\">--请选择--</option>";
                                for (var i = 0; i<data.length; i++){
                                    options+="<option value=\""+data[i].id+"\">"+data[i].typeName+"</option>";
                                }
                                $("#travelType2").html(options);
                            },error:function (data) {
                                alert("加载二级分类失败！")
                            }
                        });
                    }else{
                        $("#travelType2").html("");
                        var options = "<option value=\"\">--请选择--</option>";
                        $("#travelType2").html(options);
                    }
                })
            });
        </script>
        <script type="text/javascript">

            $(function() {

                $(".uploadFile").change(function() {
                    //$filePath = URL.createObjectURL(this.files);
                    //这是获取到图片元素，因为我这里的页面结构是统一的，input表单的上一个元素是img，
                    //所以这个地方只是为了获取你的img元素，然后设置src属性即可
                    //$(this).prev().attr('src', $filePath);

                    var str="";
                    var path=URL.createObjectURL(this.files[0]);
                   // alert(2);
                    str=str+"<img src='"+path+"' width='200px' height='100px' />";
                  //  alert(str);

                    $(this).parent().find(".imgsss").html(str);
                    //alert(this.files.length);
                });

                $(".imgBtn").click(function(){
                    $(this).parent().find(".uploadFile").click();
                });
            });
        </script>

        <script src="../js/HandyEditor-master/HandyEditor.min.js">
        </script>
        <script type="text/javascript">
            var he = HE.getEditor('route-text',{
                width : '500px',
                height : '400px',
                item : ['bold','underline','color','orderedList','unorderedList','undo','redo']
            });
            var index=0;

            window.onload=oload;

          /*  //单击提交
            function submitclick() {
                alert(document.getElementById("recommendation").value);
                var sub=document.getElementById("reserveExplain");
                sub.value=he.getHtml();
               // alert(document.getElementById("recommendation").value);
            }*/



            //初始化
            function oload() {
                var obj=document.getElementById("recommendation");
                he.set(obj.value);
            }





            //上一步
            function oclick() {
                //alert(index);
                var obj=document.getElementsByClassName('routeJb-js');
                var objNext=obj[index].getElementsByClassName("route-hidden");
                objNext[0].value=he.getHtml();
                //alert(he.getHtml());
               // alert(objNext[0].value);
                if(index>0){
                    index=index-1;
                    var obj1=obj[index+1];
                    obj1.style.display="none";
                    var obj2=obj[index];
                    obj2.style.display="inline-block";
                    var se=obj2.getElementsByClassName("route-hidden")[0];
                    he.set(se.value);

                    //隐藏提交  显示下一步
                    var btn =document.getElementsByClassName("layui-btn")[1];
                    btn.style.display="inline-block";
                    var btn2=document.getElementsByClassName("layui-btn")[2];
                    btn2.style.display="none";
                }

            }

            //下一步
           function rclick() {
               //alert(index);
               //进入下一步 将当前文档保存进隐藏域
               var obj=document.getElementsByClassName('routeJb-js');
               var objNext=obj[index].getElementsByClassName("route-hidden");
               objNext[0].value=he.getHtml();
               //alert(he.getHtml());
              // alert(objNext[0].value);

               if(index<4){
                   //跳到下一步 将即将进入的步骤信息覆盖上一步的残留信息
                   index = index + 1;
                   var obj1=obj[index-1];
                   obj1.style.display="none";
                   var obj2=obj[index];
                   obj2.style.display="inline-block";
                   var se=obj2.getElementsByClassName("route-hidden")[0];
                   he.set(se.value);
               }
               if(index==4){
                   //隐藏下一步  显示提交
                   var btn =document.getElementsByClassName("layui-btn")[1];
                   btn.style.display="none";
                   var btn2=document.getElementsByClassName("layui-btn")[2];
                   btn2.style.display="inline-block";

               }

           }

        </script>
    </body>

</html>